<template>
    <div class="splist">
        <div class="breadcrumb">
            <ElBreadcrumb separator="/">
                <ElBreadcrumbItem :to="{ path: '/' }">首页</ElBreadcrumbItem>
                <ElBreadcrumbItem><a href="/">权限</a></ElBreadcrumbItem>
                <ElBreadcrumbItem>用户列表</ElBreadcrumbItem>
            </ElBreadcrumb>
        </div>
        <div class="splist_cont">
            <div class="cont_view">
                <div class="cont">
                    <ElRow :gutter="12">
                        <ElCol :span="24">
                            <ElCard shadow="always">
                                <ElIcon>
                                    <Search />
                                </ElIcon>
                                <span>筛选搜索</span>
                                <ElButton type="primary" @click="HandleSearch">查询搜索</ElButton>
                                <ElButton @click="HandleReset">重置</ElButton>

                                <ElForm>
                                    <ElFormItem label="账号/姓名">
                                        <ElInput v-model="keyword" placeholder="请输入账号/姓名" />
                                    </ElFormItem>
                                </ElForm>
                            </ElCard>
                        </ElCol>
                    </ElRow>
                    <div class="cont">
                        <ElRow :gutter="12">
                            <ElCol :span="24">
                                <ElCard shadow="always">
                                    <ElIcon>
                                        <Tickets />
                                    </ElIcon>
                                    <span>数据列表</span>
                                    <ElButton type="primary">添加</ElButton>
                                </ElCard>
                            </ElCol>
                        </ElRow>
                    </div>
                </div>
            </div>
            <div class="middle">
                <ElTable border style="width: 100%" :data="ListData">
                    <ElTableColumn prop="id" label="编号" width="80"></ElTableColumn>
                    <ElTableColumn prop="username" label="账号" width="120">
                    </ElTableColumn>
                    <ElTableColumn prop="nickName" label="姓名" width="120"></ElTableColumn>
                    <ElTableColumn prop="email" label="邮箱" width="150"></ElTableColumn>
                    <ElTableColumn label="添加时间">
                        <template #default="{ row }">
                            {{ FormatDate(row.createTime) }}
                        </template>
                    </ElTableColumn>
                    <ElTableColumn label="最后登录">
                        <template #default="{ row }">
                            {{ FormatDate(row.loginTime) }}
                        </template>
                    </ElTableColumn>
                    <ElTableColumn label="是否启用" prop="status">
                        <template #default="scope">
                            <ElSwitch v-model="scope.row.status" :active-value="1" :inactive-value="0"
                                @change="ChangeUpdateStatus(scope.row)"></ElSwitch>
                        </template>
                    </ElTableColumn>
                    <ElTableColumn prop="icon" label="操作" width="150">
                        <template #default="{ row }">
                            <ElButton class="el_button" link type="primary">分配角色
                            </ElButton>
                            <ElButton class="el_button" link type="primary" @click="edit(row)">编辑
                            </ElButton>
                        </template>
                    </ElTableColumn>
                </ElTable>
                <EditAdmin :visible="editAdminVisible" @close="closeFn" :data="editAdminData" />
            </div>
            <div class="bottom">
                <Bottom @gethandleSize="gethandleSize" @gethandleCurrent="gethandleCurrent"
                    :total="pageination.total" />
            </div>
        </div>
    </div>
</template>
    
<script setup lang='ts'>
import Bottom from '@/components/Bottom.vue'
import EditAdmin from '@/views/ums/components/EditAdmin.vue';
import { Ref, ref } from 'vue';
import * as http from '@/request/api'
import dayjs from 'dayjs';
import { useTable } from '@/hooks/components/useTable';

const keyword = ref('')
// 首次进入页面时发送请求渲染数据
let { ListData,
    pageination,
    gethandleSize,
    gethandleCurrent,
    getAdminList
} = useTable(http.admin.getAdminList, { keyword: keyword })
// 修改账号状态
async function ChangeUpdateStatus(data: ILoginListType) {
    const res = await http.admin.AdminUpdateStatus({
        id: data.id,
        status: String(Number(data.status))
    })
}
// 搜索框搜索
const HandleSearch = () => {
    getAdminList();
};
// 组件编辑
// 控制弹框显示隐藏
let editAdminVisible = ref(false)
let editAdminData = ref({}) as Ref<ILoginListType>
function edit(row: ILoginListType) {
    editAdminData.value = row
    editAdminVisible.value = true
}
// 关闭事件触发的方法
function closeFn() {
    editAdminVisible.value = false
}

// 时间格式化
const FormatDate = (date?: string) => {
    if (!date) return ''
    return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
}
// 清空搜索框数值
const HandleReset = () => {
    keyword.value = "";
};
</script>
    
<style lang="less" scoped>
.splist {
    // padding: 15px 15px 100px;
    margin: auto;
}

.breadcrumb {
    position: fixed;
    width: 100%;
    z-index: 999;
    background-color: #fff;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    top: 70px;
}

.splist_cont {
    padding: 15px 15px 100px;
    margin: auto;
}

.cont_view {
    margin-top: 46px;

    .cont {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    :deep {
        .el-button {
            float: right;
            margin-left: 20px;
        }
    }
}

:deep {
    .el-table .cell {
        text-align: center;
    }

    .el-icon {
        font-size: 14px;
        margin-right: 10px;
    }
}

.bottom {
    display: flex;
    margin-top: 10px;
    justify-content: end;
}
</style>